
/* 简单写法 */
/* *, ::before, ::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
} */

/* ------公共基础样式------ */
/* 规范写法 */
body,header,footer,section,div,span,p,img,a,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,i,b,u,menu,nav,
fieldset,legend,article,aside,details,figcaption,figure,hgroup,pre,form,input,blockquote,th,
th,td,tr,table,textarea{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;  /* 取消高亮显示 */
	-webkit-user-select: none; /* 禁止用户选中 */
	-webkit-text-size-adjust: none; /* 禁止自动调整字体大小 */
}

h1,h2,h3,h4,h5,h6,em,i,b,u{ /* 重置 常见标签的 默认样式 */
	font-size: 100%; 
	font-style: normal; 
	font-weight: normal;
}

ul,li,ol{ 
	list-style: none;
}

img,fieldset{
	display: block;
	border: 0 none; 
	vertical-align:middle;
}

input, textarea{
	resize: none; /*不允许调整尺寸*/
}

:focus{ 
	outline: none; 
}

input[type="submit"],input[type="reset"],
input[type="button"],input[type="password"],
input[type="search"],button{
	-webkit-appearance:none;  /*清除表单中对象的外观样式*/
}
.clearfix:after{  /*清除浮动*/
	display: block;
	width: 0;
	height: 0;
	line-height: 0px;
	visibility: hidden;
	content: '';
	clear: both;
}

/*超链接*/
a,a:link,a:visited{ 
	text-decoration: none; 
	color: #333;
}
a:hover{ 
	color: #666; 
	text-decoration: none;
}

body{
	font-family: "Microsoft YaHei","\u534E\u6587\u7EC6\u9ED1",Verdana,Arial,Helvetica,sans-serif; 
	font-size: 28px;
}

/* --- header --- */
header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0 auto;
	width: 100%;
	height: 0.88rem;
	max-width: 7.5rem;
	min-width: 3.2rem;
}
header .header_l{ /* 左 */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 0.9rem;
	height: 100%;
}
header .header_l i{
	display: block; 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	transform: translate(-50%,-50%);
	width: 0.44rem;
	height: 0.44rem;
	font-size: 0.44rem;
	color: #fff;
}
header .header_form{ /* 中 */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	padding: 0.12rem 0.9rem;
	width: 100%;
	height: 100%;
}
header .header_form form{
	width: 100%;
	height: 100%;
	border-radius: 0.06rem;
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.5);
}
header .header_form form input{
	width: 100%;
	height: 100%;
	padding-left: 0.18rem; /* 18px/100px = 0.18rem*/
	font-size: 0.3rem;
	color: #606060;
	border: 0 none;
	background: transparent;
}
header .header_form form input::-webkit-input-placeholder{
	color: #606060;
}
header .header_form form button{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1.2rem;
	width: 0.4rem;
	height: 0.4rem;
	font-size: 0.4rem;
	border: 0 none;
	color: #fff;
	background: transparent;
}
header .header_msg{ /* 右 */
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 0.9rem;
	height: 100%;
}
header .header_msg i{
	display: block; 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	transform: translate(-50%,-50%);
	width: 0.44rem;
	height: 0.44rem;
	font-size: 0.44rem;
	color: #fff;
}

/* ---tabbar--- */
footer{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	right: 0;
	margin: 0 auto;
	width: 100%; 
	height: 0.98rem;
	max-width: 7.5rem; 
	min-width: 3.2rem;
	border-top: 0.01rem solid #dcdcdc;
	background: #fff;
}
footer ul{
	display: flex;
	width: 100%;
	height: 100%;
}
footer ul li{
	position: relative;
	flex: 1;
}
footer ul li a{
	position: absolute; 
	left: 50%; 
	top: 50%; 
	transform: translate(-50%,-50%);
	display: block;
	width: 80%;
	height: 80%;
}
footer ul li:nth-child(1) a{
	background: url(../images/home_default.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(1).on a{
	background: url(../images/tabbar01.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(2) a{
	background: url(../images/tabbar02.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(2).on a{
	background: url(../images/cate_hover.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(3) a{
	background: url(../images/tabbar03.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(4) a{
	background: url(../images/tabbar04.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li:nth-child(5) a{
	background: url(../images/tabbar05.jpg) no-repeat center center ;
	background-size: contain;
}
footer ul li.on{}
footer ul li.on a{}

